<template>
    <div class="header-button">
        <!-- 按钮  class="btnBox"-->
        <div v-if="roleFlag" :class="{'btnBox':true,'disNone':coilInBoolen}">
            <div id="agentStatusTimeLabel" class="status_bar disNone">
                <div class="status_bar_item">
                    状态:
                    <span></span>
                </div>
                <div class="status_bar_item time"></div>
            </div>
            <el-button id="loginOrLogoutBtn" onclick="connectToCti(event);" :disabled="true">签入</el-button>
            <el-button id="idleBtn" onclick="idleClick();" :disabled="true">就绪</el-button>
            <div class="line_left"></div>
            <el-button id="answerBtn" onclick="answerBtnClick();" :disabled="true">接听</el-button>
            <el-button id="hangupBtn" onclick="hangupClick();" :disabled="true">挂断</el-button>
            <el-button id="outBoundBtn" onclick="showkeyboard();" :disabled="true">外拨</el-button>
            <div class="line_left"></div>
            <el-button id="holdBtn" onclick="holdClick();" :disabled="true">保持</el-button>
            <el-button id="toAgentBtn" @click="transferAgent(1)" :disabled="true">转接</el-button>
            <el-button
                id="toConsultBtn"
                @click="transferAgent(2)"
                :disabled="true"
                style="display: none"
            >咨询</el-button>
            <el-button
                id="conferenceAgentBtn"
                @click="transferAgent(3)"
                :disabled="true"
                style="display: none"
            >会议</el-button>
            <div class="line_left"></div>
            <el-button id="chackPwdBtn" @click="showCheckPwdDiv" :disabled="true">密码验证</el-button>
            <el-button
                id="testButton"
                onclick="cesDemo()"
                :disabled="false"
                style="display: none"
            >测试按钮</el-button>
        </div>
        <div
            align="center"
            id="checkPwdDiv"
            name="checkPwdDiv"
            style="position:absolute; left:370px; top:57px;display:none"
        >
            <el-row class="infoItem">
                <el-radio label="cxmm" v-model="mmFlag" border>验证查询密码</el-radio>
                <el-radio label="jymm" v-model="mmFlag" border>验证交易密码</el-radio>
                <el-button
                    type="primary"
                    size="small"
                    @click="confirmCheckPwd"
                    icon="el-icon-circle-check"
                >确定</el-button>
                <el-button type="primary" size="mini" @click="closeCheckPwdDiv">关 闭</el-button>
            </el-row>
        </div>
        <div v-if="roleFlag" class="btnBox unlineBtn">
            <el-button id="satisfactionBtn" @click="handleSatisfactionClick" :disabled="true">转接满意度</el-button>
        </div>
        <div v-if="!roleFlag && !unlineFlag" style="margin-left: 118px">
            <!--<h3>没有话务台!</h3>-->
        </div>
        <!-- 坐席选择弹框 -->
        <el-dialog
            v-drag
            :visible="agentDialogShowFlag"
            append-to-body
            center
            width="1100px"
            class="header-button dialogHeader"
            custom-class="skillGroupDialog"
            @close="handleClose"
            :close-on-click-modal="false"
        >
            <div slot="title">坐席选择</div>
            <el-form
                :inline="true"
                :model="formData"
                class="demo-form-inline formData_form_inline"
                size="small"
            >
                <el-form-item label="坐席工号">
                    <el-input v-model="formData.loginId" placeholder="请输入坐席工号"></el-input>
                </el-form-item>
                <el-form-item label="坐席名称">
                    <el-input v-model="formData.loginName" placeholder="请输入坐席名称"></el-input>
                </el-form-item>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-search"
                    @click="transferAgent(0)"
                    :loading="searchLoading"
                >查 询</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-refresh-right"
                    @click="handleReset"
                    :loading="resetLoading"
                >重 置</el-button>
            </el-form>
            <el-table
                :data="tableData"
                width="100%"
                class="tableHeight"
                border
                highlight-current-row
                @row-click="handleSelectRow"
            >
                <el-table-column label="选择" width="50">
                    <template slot-scope="scope">
                        <el-radio
                            v-model="currentRowId"
                            :ref="scope.row.agentId"
                            :label="scope.row.agentId"
                        >{{ "" }}</el-radio>
                    </template>
                </el-table-column>
                <el-table-column label="系统话务工号" prop="agentId"></el-table-column>
                <el-table-column label="分机号" prop="extNo"></el-table-column>
                <el-table-column label="坐席工号" prop="loginId"></el-table-column>
                <el-table-column label="坐席姓名" prop="loginName"></el-table-column>
                <!-- <el-table-column label="操作员工号" prop="optNo"></el-table-column> -->
            </el-table>
            <!-- 分页 -->
            <div class="pagination">
                <Pagination
                    :hanleChangeCurrentPage="hanleChangeCurrentPage"
                    :handleChangeSize="handleChangeSize"
                    :currentPage="currentPage"
                    :pageSize="pageSize"
                    :total="total"
                />
            </div>
            <div slot="footer" class="btnBox footer">
                <el-button
                    type="primary"
                    v-if="currentType === 1"
                    @click="handleConfirm('转接综合IVR','zhIvr')"
                >转接综合IVR</el-button>
                <el-button
                    type="primary"
                    v-if="currentType === 1"
                    @click="handleConfirm('转接信用卡IVR','ivr')"
                >转接信用卡IVR</el-button>

                <el-button
                    type="primary"
                    v-if="currentType === 1"
                    @click="handleConfirm('请选择坐席','noIvr')"
                >转接坐席</el-button>
                <el-button
                    type="primary"
                    v-if="currentType === 2"
                    @click="handleConfirm('请选择坐席','noIvr')"
                >咨 询</el-button>
                <el-button
                    type="primary"
                    v-if="currentType === 3"
                    @click="handleConfirm('请选择坐席','noIvr')"
                >发起会议</el-button>
                <!--<el-button type="primary" id="holdBtnC" @click="handleClose">取消</el-button>-->
                <el-button
                    style="margin-left:160px;"
                    type="primary"
                    v-if="currentType === 1"
                    @click="handleConfirm('转接业务受理平台','queue')"
                >转接业务受理平台</el-button>
            </div>
        </el-dialog>

        <!--拨号盘-->
        <div
            align="center"
            id="softkeyboard"
            name="softkeyboard"
            style="position:absolute; left:22px; top:57px;display:none"
        >
            <table>
                <tr>
                    <td colspan="4">
                        <input class="screen" type="text" id="callOutPhoneNum" value size="20" />
                    </td>
                </tr>
                <tr>
                    <td colspan="4" id="xtwdDiv1" class></td>
                </tr>
                <tr>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('1')" value="1" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('2')" value="2" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('3')" value="3" />
                    </td>
                    <td>
                        <input
                            class="phoneBtn"
                            type="button"
                            value="清  空"
                            name="backspace"
                            onclick="clearall();"
                        />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('4')" value="4" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('5')" value="5" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('6')" value="6" />
                    </td>
                    <td>
                        <input
                            class="phoneBtn"
                            type="button"
                            value="本地呼叫"
                            name="backspace"
                            onclick="callOut(9);"
                        />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('7')" value="7" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('8')" value="8" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('9')" value="9" />
                    </td>
                    <td>
                        <input
                            id="backspace"
                            class="phoneBtn"
                            type="button"
                            value="异地呼叫"
                            name="backspace"
                            onclick="callOut(90);"
                        />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('*')" value="*" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('0')" value="0" />
                    </td>
                    <td>
                        <input class="phoneBtn" type="button" onclick="addValue('#')" value="#" />
                    </td>
                    <td>
                        <input
                            class="phoneBtn"
                            type="button"
                            value="关  闭"
                            name="backspace"
                            onclick="closekeyboard();"
                        />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import Pagination from '@/components/Pagination/Pagination.vue';
import { getToken, getTokenHsbankNo } from '@/utils/auth';

export default {
    name: 'HeaderButton',
    components: {
        Pagination,
    },

    data() {
        return {
            // 搜索loading
            searchLoading: false,
            // 重置loading
            resetLoading: false,
            formData: {
                loginId: '',
                loginName: '',
            },
            // 当前页码
            currentPage: 0,
            // 页码大小
            pageSize: 5,
            // 总数
            total: 0,
            // 当前页码
            currentPageTel: 0,
            // 页码大小
            pageSizeTel: 10,
            // 总数
            totalTel: 0,
            skillGroupDialogShowFlag: false, // 技能组列表展示弹框显示控制阀
            telNoShowFlag: false, // 外呼号码列表展示弹框显示控制阀
            currentRowData: '', // 当前选择的技能组数据
            currentRowId: '', // 当前选择技能组的id
            currentRowTel: '', // 当前选择外线号码
            skillGroupList: [], // 技能组数据
            toTelList: [], // 外线号码数据

            agentDialogShowFlag: false, // 坐席选择弹框显示控制阀
            // loginAgentList: [], // 坐席选择列表
            currentType: 1, // 当前类型
            roleFlag: false,
            unlineFlag: false,
            tableData: [],
            dialPhoneDialogShowFlag: false,
            mmFlag: 'cxmm',
            coilInBoolen: false,
        };
    },
    created() {
        window.getElementMessage = this.getElementMessage;
    },
    mounted() {
        // 包含在线角色
        if (getToken() && JSON.parse(getToken()).roleType.indexOf('4') !== -1) {
            this.roleFlag = true;
        } else {
            this.roleFlag = false;
        }
        // 包含离线角色
        if (getToken() && JSON.parse(getToken()).roleType.indexOf('5') !== -1) {
            this.unlineFlag = true;
        } else {
            this.unlineFlag = false;
        }
        this.getCoilInFun();
    },

    filters: {
        // 文字转译
        getTranslateText(val) {
            let text = '否';
            if (val && val.split('#')[2] === 'true') {
                text = '是';
            }
            return text;
        },
    },
    computed: {
        ...mapGetters([
            'currentSessionObj',
            'customerInfo_3002', // 客户信息 3002
            'cardInfo_3004',
        ]),
    },
    methods: {
        getCoilInFun() {
            const titleValue = sessionStorage.getItem('coilIn');
            if (titleValue === '离线') {
                this.coilInBoolen = true;
            } else {
                this.coilInBoolen = false;
            }

        },
        getSessionType() {
            return this.currentType;
        },
        getElementMessage(title, message, flag) {
            if (flag === 'success') {
                this.$alert(message, title, {
                    customClass: 'success', type: 'success',
                });
            } else if (flag === 'warning') {
                this.$alert(message, title, {
                    customClass: 'warning', type: 'warning',
                });
            } else if (flag === 'error') {
                this.$alert(message, title, {
                    customClass: 'error', type: 'error',
                });
            } else {
                // this.$message({ type: flag, message });
                this.$confirm(message, '提示', {
                    cancelButtonText: '取消',
                    confirmButtonText: '确认',
                    type: 'warning',
                }).then(() => {
                    if (flag === 'CallIncomming') {
                        answerBtnClick();
                    } else if (flag === 'Logout') {
                        disconnectBtnClick();
                    }
                }, () => { });
            }
        },
        // 点击显示坐席选择列表
        transferAgent(type) {
            if (type == 0) {
                this.currentType = this.currentType
            } else {
                this.currentType = type;
            }
            if (type === 2 && getConsultBtnLabel() === '取回' && (getConferenceBtnLabel() === '会议' || getConferenceBtnLabel() === '完成')) {
                completeCancelClick();
            } else if (type === 3 && getConferenceBtnLabel() === '完成') {
                conferenceAgentOkClick();
            } else {
                var param = {
                    pageNum: this.currentPage,
                    pageSize: this.pageSize,
                    loginId: this.formData.loginId,
                    loginName: this.formData.loginName,
                    statusCode: "Ready",
                };
                this.$post.agentStatusService.searchAgentStatusListService(param)
                    .then((res) => {
                        if (res.status === 200) {
                            this.tableData = res.data.content.agentStatusList
                            this.total = res.data.content.agentStatusCount;
                        } else {
                            this.$alert(res.data.msg, '提示', {
                                customClass: 'error', type: 'error',
                            });
                        }
                    });
                this.agentDialogShowFlag = true;
            }
        },

        // 选择表格行
        handleSelectRow(row) {
            this.currentRowData = row;
        },

        handleSatisfactionClick() {
            satisfactionClick('SAT000', '');
        },

        // 确认选择
        handleConfirm(tips, flag) {
            if (flag === 'ivr') {
                //转接信用卡IVR
                tranferIVRClick('CIDCHECK', this.currentSessionObj.ivrData.data.AUTH);
            } else if (flag === 'zhIvr') {
                //转接综合IVR
                tranferZHIVRClick();
            } else if (flag === 'queue') {
                //转接业务受理平台
                // var data = {
                //     "sessionType": "d"
                // };
                tranferAgentQueueClick();
            } else if (flag === 'noIvr') {
                if (!this.currentRowData) {
                    this.$alert(tips, '提示', {
                        customClass: 'warning', type: 'warning',
                    });
                } else {
                    const type = this.currentType;
                    var agentId = this.currentRowId.substr(2, 6);
                    if (type === 1) { // 转接坐席
                        var data = {
                            "sessionType": "t"
                        };
                        tranferAgentClick(agentId, data);
                    } else if (type === 2) { // 咨询坐席
                        var data = {
                            "sessionType": "z"
                        };
                        completeAgentClick(agentId, data);
                    } else if (type === 3) { // 会议坐席
                        var data = {
                            "sessionType": "c"
                        };
                        conferenceAgentClick(agentId, data);
                    }
                }
            }
            this.handleClose();
        },
        // 打开验证密码弹框
        showCheckPwdDiv() {
            document.getElementById("checkPwdDiv").style.display = "block";
        },
        // 关闭验证密码弹框
        closeCheckPwdDiv() {
            document.getElementById("checkPwdDiv").style.display = "none";
        },
        // 确认转接IVR进行验密
        confirmCheckPwd() {
            if (this.mmFlag === 'cxmm') {//查询密码验证
                console.log("this.customerInfo_3002.PINSET", this.customerInfo_3002.PINSET);
                if (this.customerInfo_3002.PINSET === 0) {
                    this.getElementMessage('提示', "该卡号未设置查询密码", true);
                } else {
                    chackPwdClick('CONF907', 'checkPwd');
                }
            } else if (this.mmFlag === 'jymm') {//交易密码验证
                console.log("this.cardInfo_3004.PINSET", this.cardInfo_3004.PINSET);
                if (this.cardInfo_3004.PINSET === 0) {
                    this.getElementMessage('提示', "该卡号未设置交易密码", true);
                } else {
                    chackPwdClick('CONF909', 'checkPwd');
                }
            }
            this.closeCheckPwdDiv();
        },

        // 弹框关闭
        handleClose() {
            this.skillGroupDialogShowFlag = false;
            this.agentDialogShowFlag = false;
            this.telNoShowFlag = false;
            this.currentRowId = '';
            this.currentRowTel = '';
            this.currentRowData = {};
            this.currentType = '';
            this.formData = {
                loginId: '',
                loginName: '',
            };
        },
        // 点击重置
        handleReset() {
            this.formData = {
                loginId: '',
                loginName: '',
            };
            this.currentPage = 1;
            this.pageSize = 10;
            this.transferAgent(1);
        },
        // 页码切换方法
        hanleChangeCurrentPage(val) {
            this.currentPage = val;
            this.transferAgent(1);
        },
        // 切换分页大小方法
        handleChangeSize(val) {
            this.pageSize = val;
            this.transferAgent(1);
        },
    },
};
</script>
<style lang="scss" scoped>
#checkPwdDiv {
    width: 240px;
    background-color: #fbf7f6;
    border: 1px solid #c6e3ff;
}

#softkeyboard {
    width: 249px;
    background-color: #5190c6;
    border: 1px solid #c6e3ff;
    table {
        padding: 5px 0 5px;
        .screen {
            margin: 0 auto;
            width: 200px;
            padding: 4px 5px;
            height: 34px;
            border: 1px solid #e5e5e5;
            border-radius: 4px;
            background-color: #fff;
            text-align: right;
            line-height: 34px;
            font-size: 15px;
            color: #333;
            outline: none;
            text-transform: uppercase;
        }
        tr td {
            text-align: center;
            input.phoneBtn {
                width: 60px;
                height: 34px;
                border-radius: 5px;
                border: 1px solid #e5e5e5;
                outline-color: #e5e5e5;
                background: -webkit-gradient(
                    linear,
                    0 0,
                    0 100%,
                    from(#f7f7f7),
                    to(#ebebeb)
                );
                line-height: 30px;
                text-align: center;
                text-shadow: 0px 1px 1px #fff;
                font-weight: bold;
                color: #333;
                margin-top: 11px;
                font-size: 12px;
                cursor: pointer;
                &:active {
                    background-color: #fff;
                }
                &:focus {
                    border: 1px solid #e5e5e5;
                }
            }
        }
    }
}

.pagination {
    text-align: right;
    margin: 15px 0 0;
}
.header-button {
    margin-left: 20px;
    width: 100%;
    display: inline-flex;
    .line_left {
        border-left: 1px solid #ccc;
        height: 25px;
        line-height: 25px;
        margin: 3px 6px;
    }
    .btnBox {
        display: flex;
        align-items: center;
        background-color: #fff;
        input:disabled,
        select:disabled {
            background: #f5f7fa;
            border-color: #e4e7ed;
            color: #c0c4cc;
            cursor: not-allowed;
        }
        select {
            border-radius: 4px;
        }
        button {
            height: 32px;
            padding: 0px 8px;
            margin: 0px 3px;
            outline: none;
            border-radius: 4px;
            cursor: pointer;
            i {
                position: absolute;
                width: 20px;
                height: 25px;
                left: 8px;
                top: 2px;
                // vertical-align: sub;
            }
            &.el-button-smell {
                width: 85px;
            }
        }
        button:disabled {
            cursor: not-allowed;
        }
    }
    .unlineBtn {
        position: absolute;
        right: 140px;
        margin-top: 4px;
    }
    .footer {
        text-align: center;
        display: inline-flex;
        button {
            padding: 0 14px;
        }
    }
}
.dialogHeader {
    display: inline-table;
}

.header-button {
    .status_bar {
        display: inline-block;
        width: 100px;
        color: red;
        line-height: 18px;
        height: 36px;
        font-size: 12px;
        text-align: center;
        border: 1px solid #b6caf7;
        background-color: #cbdbff;
        border-radius: 5px;
        margin-top: 2px;
        .status_bar_item {
            height: 18px;
        }
    }
    .btnBox {
        /* 就绪 */
        button.jxStyle {
            background-color: #3fbb9c !important;
            border: 1px solid #3fbb9c !important;
        }
        /* 示忙 */
        button.smStyle {
            background-color: #ff7878 !important;
            border: 1px solid #ff7878 !important;
        }
        /* 外呼 */
        button.whStyle {
            background-color: #3fbb9c !important;
            border: 1px solid #3fbb9c !important;
        }
        /* 接听 */
        button.jtStyle {
            background-color: #3fbb9c !important;
            border: 1px solid #3fbb9c !important;
        }
        /* 挂断 */
        button.gdStyle {
            background-color: #ff7878 !important;
            border: 1px solid #ff7878 !important;
        }
        /* 转接满意 */
        button.zjmydStyle {
            background-color: #3fbb9c !important;
            border: 1px solid #3fbb9c !important;
        }
        /* 验密 */
        button.ymStyle {
            background-color: #3fbb9c !important;
            border: 1px solid #3fbb9c !important;
        }
        /* 保持 */
        button.bcStyle {
            background-color: #3fbb9c !important;
            border: 1px solid #3fbb9c !important;
        }
        /* 转接坐席 */
        button.zjzxStyle {
            background-color: #3fbb9c !important;
            border: 1px solid #3fbb9c !important;
        }
    }
}
</style>
<style lang="scss">
.dialogHeader .tableHeight {
    max-height: 420px;
}
</style>